import React, { useState, useEffect } from 'react';
import { Card, Button, Typography, Input, Form, Row } from 'tdesign-react';
import { getDetailInfo, saveDetailInfo } from 'services/detail';
import FormItem from 'tdesign-react/es/form/FormItem';
import { DetailInfo } from 'types/detail';
import axios from 'axios';

const { Title, Paragraph } = Typography;

const detail: React.FC = () => {
  // 企业信息状态
  const [detail, setDetail] = useState<DetailInfo>({
    company_id: '998a5805-ff3d-477d-a598-8348db542ccf',
    company_name: '数字化智能',
    invite_code: 'RYJJ JBQM',
    administrator_name: '张山',
    administrator_phone: '18800001234',
    administrator_password: '734567',
  });

  // 编辑状态
  const [isEditing, setIsEditing] = useState(false);

  // 从后端加载数据
  useEffect(() => {
    const fetchData = async () => {
      const url = 'https://0dac-120-231-178-84.ngrok-free.app';
      const params = {};
      console.log('请求 URL:', url);
      console.log('请求参数:', params);

      try {
        const res = await getDetailInfo();
        if (res && res.code === 200) { 
          //  成功：处理数据、更新状态
          setDetail(res.data.data);
          console.log('获取企业信息成功:', res);
        } else {
          //  失败：后端返回业务错误（如 code=500 等）
          console.error('获取企业信息失败（业务错误）:', res);
        }
      } catch (error) {
       if (axios.isAxiosError(error)) {
         // 处理网络错误或请求失败
         console.error('Network error:', error.message);
       } else {
         // 处理其他错误
         console.error('Unexpected error:', error);
       }
      //  若不用 Toast，可直接 console 或省略提示
        console.error('获取企业信息失败:', error);
      }
    fetchData();
  }}, []);

  // 复制邀请码
  const handleCopy = () => {
    navigator.clipboard.writeText(detail.invite_code)
      .then(() => {
        // 若需要提示，可改用 TDesign 的 message 或其他方式
        console.log('邀请码复制成功');
      })
      .catch((err) => {
        console.error('复制失败:', err);
      });
  };

  // 切换编辑状态
  const handleEdit = () => {
    setIsEditing(!isEditing);
  };

  // 保存编辑
  const handleSave = async () => {
    try {
      await saveDetailInfo(detail);
      setIsEditing(false);
      // 若需要提示，可改用 TDesign 的 message 或其他方式
      console.log('保存成功');
    } catch (error) {
      console.error('保存失败:', error);
    }
  };

  // 表单变化（编辑时更新状态）
  const handleFormChange = (value: any, context: { name: string }) => {
    setDetail({
      ...detail,
      // admin: { ...detail, [context.name]: value },
    });
  };
  return (
    <div style={{ padding: '24px' }}>
      {/* 企业名称 & 邀请码概览 */}
      <Card title='企业名称' style={{ marginBottom: '24px' }}>
        <div style={{ display: 'flex', alignItems: 'center' }}>
          {/* 模拟 Logo */}
          <div 
            style={{
              width: '40px',
              height: '40px',
              backgroundColor: '#409eff',
              color: '#fff',
              borderRadius: '4px',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginRight: '12px',
              fontSize: '16px',
            }}
          >
            数
          </div>
          <div>
            <Title level='h4'>{detail.company_name}</Title>
            <Paragraph style={{ margin: 0 }}>企业邀请码: {detail.invite_code}</Paragraph>
          </div>
        </div>
      </Card>

      {/* 邀请码复制区 */}
      <Card title='企业邀请码' style={{ marginBottom: '24px' }}>
        <div 
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '120px',
            backgroundColor: '#f5f7fa',
            marginBottom: '16px',
            borderRadius: '4px',
            fontSize: '20px',
          }}
        >
          {detail.invite_code}
        </div>
        <Row justify='center'>
          <Button theme='primary' onClick={handleCopy} style={{ fontWeight: 400 }}>
            复制邀请码
          </Button>
        </Row>
      </Card>

      {/* 管理员信息区 */}
      <Card title='管理员信息'>
        {detail && (
          <Form
            layout='inline' // 若 TDesign 不支持，改用 inline 或自定义样式
            colon={false} 
            labelAlign='top'
            disabled={!isEditing}
          >
            <FormItem label='管理员姓名' requiredMark>
              <Input
                value={detail.administrator_name}
                onChange={(value) => handleFormChange(value, { name: 'administrator_name' })}
              />
            </FormItem>
            <FormItem label='管理员手机' requiredMark>
              <Input
                value={detail.administrator_phone}
                onChange={(value) => handleFormChange(value, { name: 'administrator_phone' })}
              />
            </FormItem>
            <FormItem label='管理员密码' requiredMark>
              <Input 
                type='password'
                value={detail.administrator_password} 
                onChange={(value) => handleFormChange(value, { name: 'administrator_password' })}
              />
            </FormItem>
          </Form>
        )}

        {/* 编辑/保存按钮 */}
        <div style={{ textAlign: 'right', marginTop: '16px' }}>
          {isEditing ? (
            <>
              <Button theme='primary' onClick={handleSave}>
                保存
              </Button>
              <Button variant='text' onClick={handleEdit} style={{ marginLeft: '8px' }}>
                取消
              </Button>
            </>
          ) : (
            <Button
              variant='text'
              onClick={handleEdit}
              style={{ color: 'rgba(0,71,171,1)', borderRadius: '4px', borderColor: 'rgba(0,71,171,1)' }}
            >
              编辑
            </Button>
          )}
        </div>
      </Card>
    </div>
  );
};

export default detail;
// export default memo(() => <div>员工录入-待开发</div>);
